<template>
	<div class="channel-edit">
		<van-cell class="mb-18" :border="false">
			<div slot="title" class="channel-title-wrap">
				<span class="title">我的频道</span>
				<span class="tip">点击进入</span>
			</div>
			<van-button size='mini' type="danger" plain round @click="isEdit = !isEdit">编辑</van-button>
		</van-cell>
		<van-grid class="mb-28" :border="false" gutter="10">
		  <van-grid-item 
			v-for="(item,index) in userChannels" 
			:key="item.id" 
			class="channel-item"
			@click="handleChannelDeleteOrActive(item,index)"
			>
			  <div slot="text" class="text" :class="{active:index === isActived}">{{item.name}}</div>
			  <van-icon v-show="isEdit && item.name != '推荐'" slot="icon" class="close-icon" name="close"></van-icon>
		  </van-grid-item>
		</van-grid>
		<van-cell class="mb-18" :border="false">
			<div slot="title" class="channel-title-wrap">
				<span class="title">推荐频道</span>
				<span class="tip">点击添加</span>
			</div>
		</van-cell>
		<van-grid class="mb-28" :border="false" gutter="10">
		  <van-grid-item 
		  v-for="(item,index) in recommendChannels" 
		  :key="item.id" 
		  class="channel-item"
		  @click="handleAddChannel(item)"
		  >
			  <div slot="text" class="text">{{item.name}}</div>
		  </van-grid-item>
		</van-grid>
	</div>
</template>

<script>
	import {getAllChannels,deleteUserChannel,addUserChannel} from '@/api/channel.js'
	import {mapState} from 'vuex'
	import {getItem,setItem} from '@/utils/storage.js'
	
	export default {
		name:'channelEdit',
		props:{
			userChannels:{
				type:Array,
				default(){
					return []
				}
			},
			isActived:{
				type:Number,
				default:0
			}
		},
		data(){
			return {
				isEdit:false,
				allChannels:[]
			}
		},
		created(){
			this._getAllChannels()
		},
		methods:{
			async _getAllChannels(){
				const {data} = await getAllChannels()
				this.allChannels = data.data.channels
			},
			handleChannelDeleteOrActive(item,index){
				
				if(this.isEdit && item.name != "推荐"){
					// 执行删除用户频道操作
					this.handleDeleteChannel(item,index)
				}else{
					this.$emit('channelSelected',index)
					this.$emit('close')
				}
				
			},
			async handleDeleteChannel(item,index){
				// 使用本地存储或者线上存储
				try{
					// 判断是否用户已经登录
					if(this.user){
						// 线上删除用户频道
						await deleteUserChannel(item.id)
						this.userChannels.splice(index,1)
					}else{
						// 线下删除用户频道
						// 保存用户频道到本地
						
						this.userChannels.splice(index,1)
						setItem('localChannels',this.userChannels)
					}
					if(index<=this.isActived){
						this.$emit('channelSelected',this.isActived-1)
					}
				}catch(e){
					console.log(e)
					this.$toast('操作失败，请稍后再试')
				}
			},
			async handleAddChannel(item){
				try{
					// 判断用户是否已经登录
					if(this.user){
						// 线上添加用户频道
						await addUserChannel({
							id:item.id,
							seq:this.userChannels.length
						})
						
					}else{
						this.userChannels.push(item)
						setItem('localChannels',[...this.userChannels,item])
					}
					// 更新视图
					this.userChannels.push(item)
				}catch(e){
					console.log(e)
					this.$toast('添加失败，请稍后再试')
				}
			}
		},
		computed:{
			recommendChannels(){
				return this.allChannels.filter(channel=>{
					return !this.userChannels.find(userChannel=>userChannel.id === channel.id)
				})
			},
			...mapState(['user'])
		}
	}
</script>

<style scoped lang="less">
	.channel-edit{
		padding:50px 10px 0 10px;
		.channel-title-wrap{
			.title{
				font-size:16px;
				margin-right:15px;
			}
			.tip{
				font-size:14px;
				color:#ccc;
			}
		}
	}
	.channel-item{
		height:43px;
	/deep/ .van-grid-item__content{
			background-color:#f3f3f3;
		}
	/deep/ .van-grid-item__icon-wrapper{
			position:unset;
		}	
		.close-icon{
			position:absolute;
			font-size:16px;
			right:2px;
			top:-6px;
		}
		.text{
			font-size:14px;
			color:#222;
		}
		
	}
	.active{
		color:red !important;
	}
	.mb-18{
		margin-bottom:18px
	}
	.mb-28{
		margin-bottom:28px;
	}
</style>
